.br-t{
	position: relative;
    .before();
}
.br-b{
	position: relative;
    .after();
}
.br-l{
	position: relative;
    .l-before();
}
.br-r{
	position: relative;
    .r-after();
}
.br-1{
	position: relative;
    &:after {
		content: "";
		position: absolute;
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid @fn-color;
		transform: scale(1);
		transform: scale(1);
		transform-origin: 0 0;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),not all {
    .br-b:after,
    .br-t:before {
		transform: scaleY(.667);
	}
    .br-l:before,
    .br-r:after {
		transform: scaleX(.667);
	}
	.br-1:after {
		width: 150%;
		height: 150%;
		transform: scale(.667);
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:2),not all {
    .br-b:after,
    .br-t:before {
		transform: scaleY(.5);
	}
    .br-l:before,
    .br-r:after {
		transform: scaleX(.5);
	}
	.br-1:after {
		width: 200%;
		height: 200%;
		transform: scale(.5);
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:3),not all {
    .br-b:after,
    .br-t:before {
		transform: scaleY(.3333);
	}
    .br-l:before,
    .br-r:after {
		transform: scaleX(.3333);
	}
	.br-1:after {
		width: 300%;
		height: 300%;
		transform: scale(.3333);
	}
}